<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="">
        姓名： <input class="input-name" type="text" value="张三"><br>
        爱好：
        <!-- 数据词典 一般不会直接用中文 -->
        <!-- onchange 是当表单内容发送变化的时候触发 -->
        <!-- 思考： likesChange(this) => this.checked  是变化前的状态还是变化好的状态？ -->
        <input class="like-checkbox" onchange="getlikeCheckboxArr()" name="like" type="checkbox" value="1"> 篮球
        <input class="like-checkbox" onchange="getlikeCheckboxArr()" name="like" type="checkbox" value="2"> 足球
        <br>
        工作经验：
        <select class="exp-select" name="exp" id="">
            <option value="1">无</option>
            <option value="2">1-3年</option>
            <option value="3">3-5年</option>
        </select>
        <br>
        性别：
        <input name="sex" type="radio" checked class="sex-input" value="0"> 男
        <input name="sex" type="radio" class="sex-input" value="1"> 女
    </form>
    <script>
        // 将姓名栏名字改成李四
        var iName = document.querySelector('.input-name');
        iName.value = '李四'

        // 对于多选框 是通过控制checked属性来确定是否选中的
        var checkboxArr = document.querySelectorAll('.like-checkbox');
        function getlikeCheckboxArr() {
            var likeCheckboxArr = [];
            for (var i = 0; i < checkboxArr.length; i++) {
                if (checkboxArr[i].checked) {
                    likeCheckboxArr.push(checkboxArr[i].value);

                }
            }
            console.log(likeCheckboxArr);
            return likeCheckboxArr;
        }

        // 工作经验默认选择1-3年
        var  selEl =document.querySelector('.exp-select');
        var optionArr = selEl.children;
        optionArr[1].selected = true;

        // 男女选择默认选择男
        var sexArr = document.querySelecotr('.sex-input');
        sexArr[1].checked= true;

    </script>
</body>

</html>